<template>
    <div>
        <LoadMore @loadMore="getList" :list="complaintsList" :pageNo="pageNo" :totalPage="totalPage" v-if="complaintsList && complaintsList.length > 0">
            <div slot-scope="dloadSwiper">
                <myComplain
                    :key="dloadSwiper.index"
                    :detail="dloadSwiper.item.detail"
                    :paths="dloadSwiper.item.paths"
                    :time="dloadSwiper.item.time"
                    :id="dloadSwiper.item.id"
                />
            </div>
        </LoadMore>
        <p  v-else style="margin-top: 40px; text-align: center; font-size: 14px; background-color: #f8f8f8">您当前还没有投诉</p>
    </div>
</template>

<script>
  import Other from '_common/services/other.js';
  import LoadMore from '_components/loadMore/loadMore';
  import myComplain from '_components/myComplain/myComplain';
  import wxLogin from '_common/wxLogin.js'
  export default {
    props: {
    },
    data () {
      return {
        complaintsList: [],
        pageNo: 1,
        totalPage:1,
        pageSize: 10
      }
    },
    async beforeMount() {
      await wxLogin(this.getList)
    },
    methods: {
      getList () {
        if (this.pageNo <= this.totalPage) {
        Other.getComplaintsList(this.pageNo, this.pageSize).then(res => {
            if (res && res.code === 0) {
              let data = res.data
              this.complaintsList = this.complaintsList.concat(data.data)
              this.totalPage = data.totalsPage
              this.pageNo++
            }
            else {
              this.$alertTip(res.msg || '获取投诉列表失败请稍后再试')
            }
          },reject => {
            this.$alertTip('获取投诉列表失败请稍后再试')
          })
        }
      }
    },
    components: {
      LoadMore,
      myComplain,
    }
  }
</script>
<style lang="less" scoped>
    @import "../../css/common";
    .swiper-container{
        width: 100%;
        height: 100vh;
        .swiper-slide{
            margin-bottom: 20px;
        }
        .loadmore {
            display: flex;
            align-items: center;
            margin-left: 32px;
            margin-top: 30px;
            color: #999999;
        }
    }
    .messageTip {
      font-size: 32px;
      color: #999;
      margin-top: 30px;
      text-align: center;
    }
    
</style>
